<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Finance Manager</title>
<meta content="viewport" content="width=device-width, initial-scale=1.0">

<!-- Bootstrap css-->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/customdefine.css" rel="stylesheet">
<link href="css/datetimepicker.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<%@ include file="../navbar.jsp" %>
		<div class="body-content">
		<span class="pageHeader">个人记账</span>
		<div class="row input-form">
		<form id="newFinanceForm" action="addNewFinance.htm" method="post">
			<div class="span3">
				日期：
				<div class="input-append date form_datetime">
				    <input name="dateTime" class="span2" type="text" value="" readonly>
				    <span class="add-on"><i class="icon-th"></i></span>
				</div>
			</div>
			<div class="span3">
				金额：
				<div class="input-prepend input-append">
				  <span class="add-on">￥</span>
				  <input class="span1" id="appendedPrependedInput" type="text" 
				  name="financeNumber" onkeyup="value=value.replace(/[^\d]/g,'')">
				  <span class="add-on">.00</span>
				</div>
			</div>
			<div class="span4">
				类目：
				<select class="span3" name="financeType">
				 <c:forEach var="bigType" items="${bigTypeList }">
				   <c:forEach var="smallType" items="${bigType.smallTypeSet }">
				   <option value="${smallType.type_id}">${bigType.type_name}:${smallType.type_name}</option>
				   </c:forEach>
				 </c:forEach>
				</select>
			</div>
			<div class="span3">
				地点：
				<input name="location" type="text" class="span2"/>
			</div>
			<div class="span5">
				备注：
				<input type="text" class="span4" name="remark">
			</div>
			<div class="span1">
				<button class="btn btn-primary" type="button" onclick="checkIfNull()" >记入</button>
			</div>
		</form>
		</div>
		
		<!-- recent spending and income  -->
		<div class="infoContainer">
			<span class="pageHeader">本月账目</span>
			<c:choose>
			<c:when test="${recentNumber == 0 }">
				<br/>
				暂无记录!
			</c:when>
			<c:otherwise>
			  <div  id="financeItems">
				<table class="table table-hover">
				<thead>
				<tr>
				<th>#</th><th>日期</th><th>类型</th><th>类目</th><th>金额</th><th>地点</th><th>备注</th>
				</tr>
				</thead>
				<tbody>
				<c:forEach var="recentItem" items="${financeList }" varStatus="nowRow">
				<tr class="${recentItem.smallType.bigType.type_id==7?'success':'warning' }">
				<td>${nowRow.index + pagingObj.startRec}</td>
				<td><fmt:formatDate value="${recentItem.financeDate}" pattern="yyyy-MM-dd"/></td>
				<td>${recentItem.smallType.bigType.type_name}</td>
				<td>${recentItem.smallType.type_name }</td>
				<td style="text-align:right;width:30px">${recentItem.money }</td>
				<td>${recentItem.location }</td>
				<td>${recentItem.remark }</td>
				</tr>
				</c:forEach>
				</tbody>
				</table>
				  <ul class="pager">
					 <li class="${pagingObj.curPage==1?'disabled':''}">
					 <a href="financeInput.htm?curPage=${pagingObj.curPage-1}">前一页</a></li>
					 <li class="${(pagingObj.curPage==pagingObj.totalPage || pagingObj.totalPage==0)?'disabled':'' }">
					 <a href="financeInput.htm?curPage=${pagingObj.curPage+1}">后一页</a></li>
				  </ul>
			  </div>
			</c:otherwise>
			</c:choose>
		</div>
		
		</div>
	</div>
	
	<!-- script -->
	<script src="http://code.jquery.com/jquery.js"></script>
	<script src="js/bootstrap.min.js" type="text/javascript"></script>
	<script src="js/bootstrap-datetimepicker.js" type="text/javascript"></script>
	<script type="text/javascript">
	 	$(".form_datetime").datetimepicker({
		    format: 'yyyy-mm-dd',
		    minView:'month'
		});
	 	function checkIfNull(){
	 		dateTime = $("input[name='dateTime']").val();
	 		if(dateTime == ""){
	 			alert("请输入日期!");
	 			return;
	 		}
	 		finance = $("input[name='financeNumber']").val();
	 		if(finance == ""){
	 			alert("请输入金额!");
	 			return;
	 		}
	 		$("#newFinanceForm").submit();
	 	}
	</script>
</body>
</html>